import React, { useRef, useState } from "react";
import { Button, DatePicker, Form, Input, Space, Tabs } from "antd";
import { useModel } from "@umijs/max";
import PreOrderTable from "./PreOrderTable";
import { useComponentDidMount } from "@/hooks";
import { fetchPreOrderTabNum } from '../services';
import XlSelect from "@/components/Form/XlSelect";

const {Item} = Form;


const PreOrder = () => {
  const [form] = Form.useForm();
  const allRef = useRef();
  const waitOrderRef = useRef();
  const orderedRef = useRef();
  const canceledRef = useRef();
  const [activeKey, setActiveKey] = useState<string>('all');
  const [tabNum, setTabNum] = useState<any>({all: 0, authed: 0, waitOrder: 0, ordered: 0, canceled: 0});
  const [searchValue, setSearchValue] = useState({});
  const initValues = {
    destType: '1'
  }
  const {getDict} = useModel('dictModel');
  const prdType = getDict('prdType');
  const sport = getDict('sport');
  const dport = getDict('dport');

  const fetchTabNum = async () => {
    const params = form.getFieldsValue();
    const res = await fetchPreOrderTabNum(params);
    setTabNum({
      totalNum: res?.totalNum || 0,
      waitOrderNum: res?.waitOrderNum || 0,
      orderNum: res?.orderNum || 0,
      cancelNum: res?.cancelNum || 0,
    });
  }


  const tabChange = (key: string) => {
    setActiveKey(key);
  }

  const refreshNum = () => {
    fetchTabNum();
  }

  const search = () => {
    setTimeout(() => {
      const refObj = tabList.find(v => v.key === activeKey)?.comRef;
      refObj?.current?.refreshTable();
    }, 0)
  }
  const handleSearch = () => {
    const params = form.getFieldsValue();
    if (params.orderTime?.length > 0) {
      params.orderTimeBegin = params?.orderTime[0]?.format('YYYY-MM-DD');
      params.orderTimeEnd = params?.orderTime[1]?.format('YYYY-MM-DD');
      delete params.orderTime;
    }
    setSearchValue(params);
    search();
  }
  const handleReset = () => {
    form.resetFields();
    setSearchValue({});
    search();
  }

  const childrenProps: {refreshNum: any; activeKey: string; searchValue: any;} = {
    refreshNum,
    activeKey,
    searchValue
  }
  const tabList: Array<any> = [
    {
      title: '全部',
      key: 'all',
      label: tabNum?.totalNum > 0 ? `全部 ( ${ tabNum?.totalNum} )` : '全部',
      comRef: allRef,
      children: <PreOrderTable {...childrenProps} tabKey="all" ref={allRef} />,
    },
    {
      title: '待下单',
      key: 'waitOrder',
      label: tabNum?.waitOrderNum > 0 ? `待下单 ( ${ tabNum?.waitOrderNum} )` : '待下单',
      comRef: waitOrderRef,
      children: <PreOrderTable {...childrenProps} tabKey="waitOrder" ref={waitOrderRef} />,
    },
    {
      title: '已下单',
      key: 'ordered',
      label: tabNum?.orderNum > 0 ? `已下单 ( ${ tabNum?.orderNum} )` : '已下单',
      comRef: orderedRef,
      children: <PreOrderTable {...childrenProps} tabKey="ordered" ref={orderedRef} />,
    },
    {
      title: '已取消',
      key: 'canceled',
      label: tabNum?.cancelNum > 0 ? `已取消 ( ${ tabNum?.cancelNum} )` : '已取消',
      comRef: canceledRef,
      children: <PreOrderTable {...childrenProps} tabKey="canceled" ref={canceledRef} />,
    },
  ];


  useComponentDidMount(() => {
    fetchTabNum();
  });
  
  return (
    <>
      <Form form={form} initialValues={initValues} layout="inline" >
        <Item name="orderTime" label="下单时间" style={{marginBottom: 15}}>
          <DatePicker.RangePicker />
        </Item>
        <Item name="productCode" label="产品" style={{marginBottom: 15}}>
          <XlSelect options={prdType} style={{width: '120px'}} />
        </Item>
        <Item name="sportCode" label="起始地" style={{marginBottom: 15}}>
          <XlSelect options={sport} style={{width: '120px'}} />
        </Item>
        <Item name="destCode" label="目的地" style={{marginBottom: 15}}>
          <XlSelect options={dport} style={{width: '120px'}} />
        </Item>
        <Item>
          <Space>
            <Button type="primary" onClick={handleSearch}>查询</Button>
            <Button type="default" onClick={handleReset}>重置</Button>
          </Space>
        </Item>
      </Form>
      <Tabs
        activeKey={activeKey}
        onChange={tabChange} 
        items={tabList}
      />
    </>
  );
};


export default PreOrder;